<template>
	<el-dialog v-model="dialogVisible" title="编辑/新增" width="1000px">
		<el-form ref="addPonitForm" label-width="auto" class="demo-ruleForm">
			<el-card>
				<template #header>
					<div class="card-header">
						<span>房屋信息</span>
					</div>
				</template>
				<el-row>
					<el-col :span="16">
						<el-form-item label="城市" prop="city">
							<el-select v-model="from.cityId" placeholder="Select" size="large" style="width: 240px">
								<el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="小区" prop="city">
							<el-select v-model="from.cityId" placeholder="Select" size="large" style="width: 240px">
								<el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="所在楼栋" prop="city">
							<el-select v-model="from.cityId" placeholder="Select" size="large" style="width: 240px">
								<el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="所在单元" prop="city">
							<el-select v-model="from.cityId" placeholder="Select" size="large" style="width: 240px">
								<el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="房号" prop="city">
							<el-select v-model="from.cityId" placeholder="Select" size="large" style="width: 240px">
								<el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="房产证号" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="建筑面积" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="室内面积" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8">
						<el-form-item label="房屋户型" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="姓名" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset="1">
						<el-form-item label="手机号" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="证件类型" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="15" :offset="1">
						<el-form-item label="身份证号" prop="city">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>

			<el-card style="margin-top: 20px">
				<template #header>
					<div class="card-header">
						<span>业主信息</span>
					</div>
				</template>
				<el-row>
					<el-col :span="3">
						<div class="r-flex-col">
							<el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
							<span>业主id：xxx</span>
						</div>
					</el-col>
					<el-col :span="20">
						<el-row>
							<el-col :span="7">
								<el-form-item label="昵称"></el-form-item>
							</el-col>
							<el-col :span="7">
								<el-form-item label="性别"></el-form-item>
							</el-col>
							<el-col :span="7" :offset="1">
								<el-form-item label="身份"></el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7">
								<el-form-item label="生日">
									<el-date-picker type="date" placeholder="选择日期" />
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="1">
								<el-form-item label="居住人数">
									<el-input></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7">
								<el-form-item label="职业">
									<el-select v-model="from.cityId" placeholder="Select" size="large" style="width: 240px">
										<el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="兴趣标签">
							<span v-for="(item, index) in labels" :key="index" class="r-margin-left-10">
								{{ item }}
							</span>
							<div v-for="(item,index) in labelInput">
								<el-input placeholder="请输入" style="width: 100px; margin: 0 5px" ></el-input>
								<span class="addbtn" @click="addLabelInput()" v-if="index === 0">添加</span>
								<span class="addbtn" @click="delLabelInput(index)" v-if="index !== 0">删除</span>
							</div>
							
						</el-form-item>
						<el-form-item label="婚姻状况">
							<el-radio-group>
								<el-radio :value="3">已婚</el-radio>
								<el-radio :value="6">未婚</el-radio>
								<el-radio :value="9">其他</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="结婚纪念日">
							<el-date-picker type="date" placeholder="选择日期" />
						</el-form-item>
						<el-form-item label="生育状况">
							<el-radio-group>
								<el-radio :value="3">已育</el-radio>
								<el-radio :value="6">未育</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="子女数量">
							<el-input placeholder="请输入" style="width: 100px; margin: 0 5px"></el-input>
							<span>添加</span>
						</el-form-item>

						<el-form inline>
							<el-form-item v-for="(row, index) in childrenFrom" :key="index">
								<el-form-item label="姓名">
									<el-input v-model="row.name" placeholder="姓名" style="width: 100px;"></el-input>
								</el-form-item>
								<el-form-item label="性别">
									<el-input v-model="row.name" placeholder="性别" style="width: 100px;"></el-input>
								</el-form-item>
								<el-form-item label="出生日期">
									<el-date-picker type="date" placeholder="出生日期" style="width: 180px;"/>
									<span @click="removeRow(index)" class="delbtn" v-if="index !== 0">删除</span>
									<span @click="addRow()" class="addbtn" v-if="index === 0">新增</span>
								</el-form-item>
								
							</el-form-item>
						</el-form>
						<el-form-item label="备注" prop="city">
							<el-input type="textarea"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确认</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue';
const dialogVisible = ref(false);
const data = reactive({
	from: {
		cityId: null,
		xiaoquId: null,
		dongId: null,
		danyuanId: null,
		haoId: null
	},
	citys: [],
	labels: ['美甲', '美发'],
	childrenFrom: [{ name: '', gender: '', birthdate: '' }],
	labelInput:[{}]
});

const { from, citys, labels, childrenFrom,labelInput } = toRefs(data);

const showModal = () => {
	dialogVisible.value = true;
};

const addRow = () => {
	const newRow = { name: '', gender: '', birthdate: '' };
	data.childrenFrom.push(newRow);
};
const removeRow = (index:number) => {
	data.childrenFrom.splice(index, 1);
};

const addLabelInput = () => {
	const newRow = { value: '' };
	data.labelInput.push(newRow);
}

const delLabelInput = (index:number) => {
	data.labelInput.splice(index, 1);
}

defineExpose({
	showModal
});

// const emits = defineEmits(['showModal'])
</script>
<style scoped>
	.delbtn,.addbtn{
		color:#169BD5;
		margin:0 10px
	}

</style>
